<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>职员工资明细</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="salary-detail">
      <div slot="search-content">
        <el-form class="search-form" :model="search" label-width="45px" label-position="left" :inline="true">
          <el-form-item label="部门">
            <el-select filterable class="search-input" v-model="search.deptId" :clearable="true" placeholder="请选择部门" @change="deptChange">
              <el-option v-for="dept in depts" :key="dept.id" :value="dept.id" :label="dept.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员">
            <el-select filterable class="search-input" v-model="search.personId" :clearable="true" placeholder="请选择人员">
              <el-option v-for="person in search.personList" :key="person.id" :value="person.id" :label="person.personName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <el-button type="primary" @click="exportExcel">导出excel</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="salary-detail-content">
        <el-table fit stripe border :data="salaryList" style="width: 100%" height="parent">
          <el-table-column prop="personId" label="编号" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="workerNo" label="工号" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="personName" label="职员名称" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="deptName" label="部门" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="dutyStr" label="职务" min-width="80px" align="center"></el-table-column>
          <el-table-column prop="monthlySalary" label="基本工资(元)" min-width="120px" align="center"></el-table-column>
          <el-table-column label="请假(比例)" min-width="110px">
            <template slot-scope="scope">
              <span>{{getSalaryRatio(scope.row,'ratioLeave')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="旷工(比例)" min-width="110px" align="center">
            <template slot-scope="scope">
              <span>{{getSalaryRatio(scope.row,'ratioAbsent')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="加班(比例)" min-width="110px" align="center">
            <template slot-scope="scope">
              <span>{{getSalaryRatio(scope.row,'ratioOvertime')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="socialSecurity" label="社保扣款(元)" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="accumulationFund" label="公积金扣款(元)" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="otherDeductions" label="其他扣款(元)" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="otherAddition" label="其他加项(元)" min-width="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" min-width="70px" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="toUpdate(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="修改工资明细" :visible.sync="openForm" top="10vh" width="85%" @closed="formClosed">
      <div style="height: calc(80vh - 54px);overflow: auto;">
        <salary-form v-if="openForm" :salary-data="salary" :level-list="levelList" @save-success="saveSuccess"></salary-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/salaryForm.css"
  ], [
    "/vueSystem/js/checkVaildUtil.js"
  ]);

</script>
<script src="./salaryForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        deptId: '',
        personId: '',
        personList: []
      };
      return {
        loading: false,
        depts: [],
        salaryList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        levelList: [],
        openForm: false,
        salary: null,
        dutyObj: {
          "1": "经理",
          "2": "主管",
          "3": "职员"
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;

      Promise.all([this.setLevelList(), this.setPersonList()]).then(function (res) {
        self.resetSalaryList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setLevelList: function () {
        var self = this;
        var getRatio = function (obj, field) {
          var value = obj[field];
          if (value === null || value === undefined) {
            return '';
          }

          return `${obj.rank}档(1:${value})`;
        };
        return ajaxRequest('dingTalk/getRewardAndPunishInfo').then(function (levelList) {
          levelList = _.map(levelList, function (obj) {
            var level = {
              rank: obj.rank,
              ratioAbsent: getRatio(obj, 'absent'),
              ratioLeave: getRatio(obj, 'leave'),
              ratioOvertime: getRatio(obj, 'overtime')
            };
            return level;
          });
          self.levelList = levelList;
        });
      },

      setPersonList: function () {
        var self = this;
        return ajaxRequest('dingTalk/askForApprover').then(function (personList) {
          personList = _.map(personList, function (person) {
            var obj = {
              id: person.id,
              deptId: person.deptId,
              deptName: person.deptName,
              personName: person.personName,
              phoneNumber: person.phoneNumber
            };
            return obj;
          });

          var deptGroup = _.groupBy(personList, function (person) {
            return `${person.deptId}_${person.deptName}`;
          });
          var depts = [];
          for (var key in deptGroup) {
            var arr = key.split('_');
            var dept = {
              id: arr[0],
              name: arr[1],
              persons: deptGroup[key]
            };
            depts.push(dept);
          }
          self.depts = depts;
          return depts;
        });
      },

      setSalaryList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        this.setPostData(postData);

        var self = this;
        return ajaxRequest('basicData/queryPersonnel', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var salaryList = res.returnData;
          for (var i = 0; i < salaryList.length; i++) {
            var salary = salaryList[i];
            salary.dutyStr = self.getDuty(salary);
          }

          self.salaryList = salaryList;
          self.pagination.totalCount = res.iTotalRecords;
          return salaryList;
        });
      },

      setPostData: function (postData) {
        postData.view = 1;
        var search = this.search;
        SysUtil.setPostData(postData, search, ['deptId', 'personId']);
      },

      resetSalaryList: function (isSearch) {
        this.loading = true;
        var self = this;
        this.setSalaryList(isSearch).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      deptChange: function (deptId) {
        var personList = this.getPersonList(deptId);
        this.search.personList = personList;
        this.search.personId = '';
      },

      getPersonList: function (deptId) {
        if (deptId === '') {
          return [];
        }

        var depts = this.depts;
        var dept = _.find(depts, {
          id: deptId
        });
        return dept.persons;
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.resetSalaryList(true);
      },

      pageChange: function () {
        this.resetSalaryList();
      },

      toUpdate: function (salary) {
        this.salary = salary;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.resetSalaryList();
      },

      formClosed: function () {
        this.salary = null;
      },

      getDuty: function (salary) {
        var duty = salary.duty;
        var dutyObj = this.dutyObj;
        var dutyStr = dutyObj[duty];
        if (dutyStr === undefined) {
          dutyStr = duty;
        }
        return dutyStr;
      },

      getSalaryRatio: function (salary, field) {
        var levelList = this.levelList;
        var rank = salary[field];
        var level = _.find(levelList, {
          rank: rank
        });
        if (level === undefined) {
          return '';
        }

        var value = level[field];
        if (value === '') {
          return '';
        }
        return value;
      },

      exportExcel: function () {
        var postData = {};
        this.setPostData(postData);
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/basicData/exprotExcelPersonnel?${formParam}`;
        window.open(path);
      }
    },

    components: {
      SalaryForm: SalaryForm
    }
  });

</script>

<style>
  .salary-detail {
    padding: 10px 20px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
  }

  .salary-detail .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .salary-detail .search-form .search-input {
    width: 150px;
  }

  .salary-detail .salary-detail-content {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
